<template>
  <div class="role-list">
    <el-card class="box-card">
      <el-form class="role-search-form">
        <el-form-item>
          <div class="btn-group">
            <h2>筛选搜索</h2>
            <div>
              <el-button :loading="loading" @click="resetSearch"
                >重置</el-button
              >
              <el-button type="primary" :loading="loading" @click="loadRoles"
                >查询搜索</el-button
              >
            </div>
          </div>
        </el-form-item>
        <el-form-item label="输入搜索">
          <el-input
            class="search-input"
            v-model="search.name"
            placeholder="角色名称"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button @click="handleCreate">添加角色</el-button>
    </el-card>
    <el-card>
      <el-table v-loading="loading" :data="roleList" style="width: 100%">
        <el-table-column type="index" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="角色名称" align="center">
        </el-table-column>
        <el-table-column prop="description" align="center" label="描述">
        </el-table-column>
        <el-table-column prop="createdTime" align="center" label="添加时间">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="
                $router.push({
                  name: 'alloc-menu',
                  params: { roleId: scope.row.id },
                })
              "
              >分配菜单</el-button
            >
            <el-button
              size="mini"
              @click="
                $router.push({
                  name: 'alloc-resource',
                  params: { roleId: scope.row.id },
                })
              "
              >分配资源</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :disabled="loading"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="search.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="search.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </el-card>
    <create-or-update-role
      :isEdit="isEditRole"
      :show="dialogVisible"
      :role="role"
      @changeDialog="changeDialog"
    ></create-or-update-role>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import dayjs from 'dayjs'
import { searchRoles, deleteRole } from '@/apis/role'
import CreateOrUpdateRole from './create-or-update-role.vue'
export default Vue.extend({
  name: 'role-list',
  components: {
    CreateOrUpdateRole
  },
  data() {
    return {
      search: {
        size: 10,
        current: 1,
        name: '',
        id: undefined,
        code: '',
        startCreateTime: '',
        endCreateTime: ''
      },
      pagination: {
        total: 0
      },
      roleList: [],
      dialogVisible: false,
      isEditRole: false,
      role: {},
      loading: false
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    async loadRoles() {
      this.loading = true
      const { data } = await searchRoles(this.search)
      if (data.code === '000000') {
        this.roleList = data.data.records.map((item: any) => ({
          name: item.name,
          id: item.id,
          createdBy: item.createdBy,
          updatedBy: item.updatedBy,
          createdTime: dayjs(item.createTime).format('YYYY-MM-DD HH:MM:ss'),
          updatedTime: item.updatedTime,
          code: item.code,
          description: item.description
        }))
        this.pagination.total = data.data.total
      }
      this.loading = false
    },
    handleCreate() {
      this.role = {}
      this.changeDialog(true)
    },
    handleEdit(row: any) {
      this.role = {
        id: row.id,
        name: row.name,
        code: row.code,
        description: row.description
      }
      this.isEditRole = true
      this.changeDialog(true)
    },
    handleDelete(row: any) {
      this.$confirm('是否要删除该角色？', '删除角色', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async() => {
          const { data } = await deleteRole(row.id)
          if (data.code === '000000') {
            this.$message.success('删除角色成功')
            this.loadRoles()
          }
        })
        .catch(() => {
          this.$message.info('取消删除角色')
        })
    },
    changeDialog(state: boolean, reload = false) {
      this.dialogVisible = state
      if (reload) this.loadRoles()
    },
    handleSizeChange(val: number) {
      this.search.size = val
      this.search.current = 1
      this.loadRoles()
    },
    handleCurrentChange(val: number) {
      this.search.current = val
      this.loadRoles()
    },
    onSubmit() {
      console.log(111)
    },
    resetSearch() {
      this.search.name = ''
      this.search.current = 1
      this.loadRoles()
    }
  }
})
</script>
<style lang="scss" scoped>
.role-list {
  .role-search-form {
    width: 100%;
    .btn-group {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .search-input {
      width: 250px;
    }
  }
}
</style>
